<!--
 * @Author: 刘十三
 * @Date: 2024-02-01 16:40:54
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-02-02 10:03:23
 * @FilePath: \NM-dev-1.3.1\dev\pages\internal\linkage\components\orgSelect.vue
 * @Description: 选择所属机构
-->
<template>
  <view class="page">
    <theme-navbar :is-white="false" :isBack="false" backColor="#2b85e4" :title="title ? title : limitNodeType == '07' ? '选择片区' : '选择所属机构'">
      <view class="nav-right-icon" @tap="onSure">
        确定
      </view>
    </theme-navbar>
    <view class="content">
      <view class="header-list">
        <u-tabs :list="tabList" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
        <u-divider bg-color="#e8e8e8" height="5" half-width="100%"></u-divider>
      </view>
      <view id="orgListContainer">
        <u-loading style="margin-left: 40%;" :show="loading" size="100" mode="flower"></u-loading>
        <u-cell-group>
          <view v-for="(item, idx) in orgItems" :key="idx">
            <u-cell-item :title="item.name" v-if="item.nodeType != limitNodeType" :arrow="hasChild(item)" @tap="handlerItem(item)">
              <view style="margin-right: 5px;margin-top:3px;" v-if="isHybrid" slot="icon" @tap.prevent.stop>
                <u-icon custom-prefix="csbi-icon" size="45" name="radio" color="#2979ff" v-if="selectIds.includes(item.id)" @click="handlerSelect(item)"></u-icon>
                <u-icon custom-prefix="csbi-icon" size="45" name="kongradio" color="#b5b5b5" v-else @click="handlerSelect(item)"></u-icon>
              </view>
            </u-cell-item>
            <u-cell-item :arrow="false" :title="item.name" v-else @tap="handlerSelect(item)">
              <template #right-icon>
                <u-icon name="checkbox-mark" color="#2979ff" size="38" v-if="selectIds.includes(item.id)"></u-icon>
              </template>
            </u-cell-item>
          </view>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
import linkageService from "@/service/internal/linkeage.service";
/**
 * 部门选择
 * 可以限制单选、多选，可选的层级
 */
export default {
  name: "OrgSelect",
  props: {
    // 单选或多选, 默认单选
    isSingle: {
      type: Boolean,
      default: true,
    },
    // 限制可选的节点类型：03专卖局、06管理所，07片区
    limitNodeType: {
      type: String,
      default: "03",
    },
    isHybrid: {
      // 是否混合选择，可选择任一层级，默认不开启
      type: Boolean,
      default: false,
    },
    treeType: {
      type: String,
      default: "zm-comp", // zm-comp
    },
    cleanParentOrg: {
      type: Boolean,
      default: false,
    },
    tips: {
      type: String,
      default: "请选择所属机构！", // zm-case
    },
    title: {
      type: String,
      default: undefined, // zm-case
    },
    parentUuid: {
      type: String,
      default: undefined,
    },
    hasVirtual: {
      // 有虚拟跟
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      user: this.$store.state.userInfo,
      orgs: [], // 所有部门数据
      tabList: [], // 页头滚动内容
      current: 0,
      orgItems: [], // 点击选中的下级部门
      selectItems: [], // 选中的部门
      selectIds: [], // 选中的id
      loading: true,
      virtualTab: {
        name: "根节点",
        id: "",
        isVirtual: true,
      },
    };
  },
  onLoad() {},
  created() {
    // 查询所在部门数据
    let org = this.user.user.org;
    let pOrgUuid = "";
    if (this.parentUuid) {
      pOrgUuid = this.parentUuid;
    } else {
      pOrgUuid = this.user.docOrgUuid || org.orgUuid;
    }
    const isSongHuoYuan = this.user.deptName.includes("送货部") ? 1 : 0;
    linkageService.getOrgTree(this.treeType, this.cleanParentOrg ? "" : pOrgUuid, isSongHuoYuan).then((dr) => {
      if (dr.success) {
        this.orgs = dr.data;
        if (!this.cleanParentOrg && !this.hasVirtual) {
          this.tabList = dr.data.filter((d) => d.nodeType == org.orgRank);
          this.orgItems = dr.data.filter((d) => d.pId == this.tabList[0].id);
        } else {
          this.tabList = [this.virtualTab];
          this.getVirtualOrgItems();
        }
      }
      this.loading = false;
    });
  },
  methods: {
    getVirtualOrgItems() {
      let nodeTyps = ["00", "01", "02", "03", "04", "05", "06", "07"];
      let tre = [];
      for (let i = 0; i < nodeTyps.length; i++) {
        tre = this.orgs.filter((itm) => {
          return itm.nodeType == nodeTyps[i];
        });
        if (tre.length > 0) break;
      }
      this.orgItems = tre;
    },
    hasChild(itm) {
      return this.orgs.filter((d) => d.pId == itm.id).length > 0;
    },
    // 切换选中项
    change(index) {
      this.current = index;
      if (this.tabList[index].isVirtual) {
        this.getVirtualOrgItems();
      } else {
        this.orgItems = this.orgs.filter((d) => d.pId == this.tabList[index].id);
      }
      this.tabList = this.tabList.slice(0, index + 1);
    },
    // 点击选中项
    handlerItem(orgItem) {
      this.tabList.push(orgItem);
      this.current = this.tabList.length - 1;
      this.orgItems = this.orgs.filter((d) => d.pId == orgItem.id);
    },
    // 点击根节点
    handlerSelect(orgItem) {
      if (this.isSingle) {
        // 单选
        this.selectItems = [];
        this.selectIds = [];
        this.selectItems.push(orgItem);
        this.selectIds.push(orgItem.id);
      } else {
        // 多选
        let sItems = this.selectItems.filter((s) => s.id == orgItem.id);
        if (sItems.length > 0) {
          this.selectItems = this.selectItems.filter((s) => s.id != orgItem.id);
          this.selectIds = this.selectIds.filter((i) => i != orgItem.id);
        } else {
          this.selectItems.push(orgItem);
          this.selectIds.push(orgItem.id);
        }
      }
    },
    // 点击确定
    onSure() {
      if (this.selectItems.length == 0) {
        this.$u.toast(this.tips);
        return false;
      }
      this.$emit("choose", this.selectItems);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-list {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100%;
  z-index: 999;
}
#orgListContainer {
  margin-top: 75px;
}
.nav-right-icon {
  padding-right: 15px;
  color: #fff;
}
/deep/ .u-tab-item {
  max-width: 160px;
}
</style>
